<template>
	<view class="content">
		<image class="logo" src="/static/logo.png">
		</image>

		<view class="text-area">
			<text class="title">{{title}}</text>
		</view>

		<view class="btns">
			<!--  -->
			<button @click="showToast" type="primary">成功</button>
			<button @click="showToastWithError" type="warn">失败</button>
			<button @click="showModal" type="default">展示模态框</button>
			<button @click="showActionSheet" type="default">展示上拉框</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello',
				books: ['A', 'B', 'C']
			}
		},
		onLoad() {
			// uni.showLoading({
			// 	title: '请稍等，正在加载中',
			// 	mask:true
			// })
			// setTimeout(() => {
			// 	uni.hideLoading()
			// }, 2000)
		},
		methods: {
			showToast() {
				uni.showToast({
					title: '欢迎使用uniapp'
				})
			},
			showToastWithError() {
				uni.showToast({
					title: '登录失败',
					image: '/static/logo.png',
					mask: true,
					duration: 1500, // 提示的持续时间
					success() {
						setTimeout(() => {
							uni.navigateTo({
								url: '/pages/demo/demo'
							})
						}, 1000)

					}
				})
			},
			showModal() {
				uni.showModal({
					title: '是否进一步操作',
					// content: '进入相关界面'
					editable: true,
					placeholderText: '请输入手机号',
					success: (res) => { // success仅仅是showModal调用成功时的回调函数
						console.log('success ', res)
						if (res.confirm) {
							uni.navigateTo({
								url: '/pages/demo/demo'
							})
						} else {
							uni.showToast({
								title: '取消成功'
							})
						}
					},
					fail: (err) => {
						console.log('fail ', err)
						uni.showToast({
							title: '取消成功'
						})
					}
				})
			},
			showActionSheet(){
				uni.showActionSheet({
					itemList: this.books,
					success: res => {
						console.log('success', res)
						console.log('你选中了', this.books[res.tapIndex])
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.btns {
		display: flex;
		flex: 1;
		justify-content: start;
		align-items: center;
		padding: 20rpx;

		button {
			// margin: 0 0 0 20rpx;
		}
	}
</style>